<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                    + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>失物招领系统</title>
    <link rel="shortcut icon" href="static/image/logo01.ico"/>
    <link href="static/easyui/themes/default/easyui.css" rel="stylesheet"/>
    <link href="static/easyui/themes/icon.css" rel="stylesheet"/>
    <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="static/vue/vue.js"></script>
    <!-- ElementUI 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- ElementUI 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="static/util.js"></script>
</head>
<body>

<%-- 以图片的方式展示失物信息 --%>
<div id="app">
    <div>
        开始日期: <input class="easyui-datebox" id="startDate" style="width:140px">
        结束日期: <input class="easyui-datebox" id="endDate" style="width:140px">
        物品类别:
        <select class="easyui-combobox" name="goodsType"
                id="goodsType" style="width: 200px;">
        </select>
        <a href="javascript:chooseScale()" class="easyui-linkbutton"
        >选取范围</a>
        <a @click="getData()" class="easyui-linkbutton"
           data-options="iconCls:'icon-search'">查询</a>
        <a href="javascript:reset()" class="easyui-linkbutton"
           data-options="iconCls:'icon-clear'">清空</a>
    </div>
    <el-row v-for="(item, index) in lostList2D" :key="index" :gutter="50">
        <el-col v-for="(subItem, subIndex) in item" :span="8" :key="subIndex"
                style="margin-top: 20px">
            <el-card style="height: 300px" @click.native="showInfo(subItem)">
                <div @click="showInfo(subItem)">物品类型：{{subItem.goodsType}}</div>
                <div>遗失地点：{{subItem.address}}</div>
                <el-image
                        style="width: 200px; height: 200px"
                        :src="'image?fileName=' + subItem.fileName"
                        fit="true"></el-image>
            </el-card>
        </el-col>
    </el-row>
</div>
<script>
  $(function () {
// 页面进来加载物品类别下拉条
    $.ajax({
      type: "get",
      url: "goodsType/list",
      success: function (response) {
        $('#goodsType').combobox({
          data: response.data,
          valueField: 'id',
          textField: 'name'
        });
      }
    });
  });
  function chooseScale() {
    openTopWindow2({
      url: 'manage/chooseScale.jsp',
      title: '选择范围',
      fit: true
    })
  }

  /* 在父窗口中打开window */
  function openTopWindow2(options) {
    options = !options ? {} : options;
    options.width = !options.width ? 500 : options.width;
    options.height = !options.height ? 400 : options.height;
    options.url = !options.url ? "404.html" : options.url;
    options.title = !options.title ? "" : options.title;
    options.fit = !options.fit ? false : options.fit;
    parent.$("#topWindow").window({
      title : options.title,
      left: 0,
      top: 0,
      width : options.width,
      height : options.height,
      content : "<iframe scrolling='no' frameborder='0' border='0' height='100%' width='100%' src='"
          + options.url + "'></iframe>",
      modal : true,
      resizable : true,
      collapsible : false,
      fit: options.fit,
      onOpen: function () {
        console.log("加载成功");
      },
      onClose: function () {
        console.log(localStorage.points);
      }
    });
  }
  // 重置按钮
  function reset() {
    $('#goodsType').combobox('clear');
    $('#startDate').datebox('setValue', '');
    $('#endDate').datebox('setValue', '');
    localStorage.points = "";
  }
  var app = new Vue({	//创建vue对象
    el: '#app',		//指定一个标签作为vue的挂载点（作用范围），使用css选择器选择
    data: {			//vue中使用的数据
      message: 0,
      lostList: [],
      lostList2D: []
    },
    methods: {
      getData() {
        var goodsType = $('#goodsType').combobox('getValue');
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var _this = this;
        $.ajax({
          url: "lost/all",
          type: "get",
          data: {
            "goodsTypeId": goodsType,
            "startDate": startDate,
            "endDate": endDate,
            "points": localStorage.points
          },
          success: function (response) {
            _this.message = 100;
            _this.lostList = response.data;
            _this.lostList2D = _this.changeArray(_this.lostList);
          }
        })
      },
      // 将一维数组转化为二维数组
      changeArray(a) {
        // 定义一个空数组c
        var c = [];
        // 先获取数组的长度
        var len = 0;
        for (var i in a) {
          len++;
        }
        var b = [];
        for (var i = 0; i < len; i++) {
          // 每隔三个创建一个数组，将三个对象保存到数组b中
          b.push(a[i]);
          if ((i + 1) % 3 == 0 || i == len - 1) {
            c.push(b);
            b = [];
          }
        }
        return c;
      },
      showInfo(item) {
        openTopWindow({
          url: 'manage/showLostDetail.jsp?id=' + item.id,
          title: '失物招领详情'
        })
      }
    },
    mounted() {
      var _this = this;
      $.ajax({
        url: "lost/all",
        type: "get",
        success: function (response) {
          _this.message = 100;
          _this.lostList = response.data;
          _this.lostList2D = _this.changeArray(_this.lostList);
        }
      })
    }
  });
</script>
</body>
</html>
